<template>
  <div class="outer">
    <headers @back-click="back()" :headers="headers">
      <div slot="righIcon" class="rightPosi"></div>
    </headers>
    <scroll :topArea="44" ref="messageCenter" :pullDownRefresh="false" :pullUpLoad="false">
      <div class="message-area" @click="goDetail()">
          <div class="img-area tip"></div>
          <div class="content-area">
              <div class="title">消息通知</div>
              <div class="detail">专属客服随时在线解答您的问题</div>
          </div>
          <i></i>
      </div>
      <div class="message-area">
          <div class="img-area kefu"></div>
          <div class="content-area">
              <div class="title">在线客服</div>
              <div class="detail">专属客服随时在线解答您的问题</div>
          </div>
          <i></i>
      </div>
    </scroll>
  </div>
</template>

<script>
import blankPage from '@/components/blankPage'
import {getAllCate} from "@/api/homepage.js"
import { Popup} from 'vux'
export default {
  name: "secondPage",
  components: {
    Popup,
    blankPage
  },
  data: function(){
    return {
      headers: {
        title: "消息中心",
      },
    }
  },
  methods: {
    back: function(){
      this.$router.go(-1);
    },
    goDetail: function(){
      if(localStorage.token){
        this.$router.push({name: "messageDetail"})
      }else {
        this.$router.push({path: '/login'})
      }
    }
  }

}
</script>
<style lang="scss" scoped>
  .outer {
    height: 100%;
    width: 100%;
    position: absolute;
  }
  .rightPosi {
    width: 22px;
    height: 20px;
    margin-right: 16px;
    background: url("../../assets/img/comm/head-icon.png") 0 0 no-repeat;
    background-size: 120%;
    background-position: 25% 0%;
  }
  .message-area{
    padding: 0 16px;
    background: #fff;
    height: 72px;
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &>div {
        height: 100%;
        float:left;
    }
    &>i {
        width: 20px;
        height: 20px;
        background: url("../../assets/img/comm/login_arrow_small@3x.png") 0 0 no-repeat;
        background-size: 45%;
        background-position: 66% 64%;
    }
    & .content-area {
        width: 274px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        & .title {
            height: 16px;
            line-height: 16px;
            font-size: 14px;
            color: #333;
        }
        & .detail {
            height: 14px;
            line-height: 14px;
            font-size: 12px;
            color: #999;
            margin-top: 10px;
        }
    }
    & .img-area {
        width: 48px;
        background: url('../../assets/img/comm/message.png') 0 0 no-repeat;
        background-size: 200%;
    }
    & .tip {
        background-position: 16% 57%;
    }
    & .kefu {
        background-position: 117% 70%;
    }
  }
</style>